<template>
  <el-drawer v-model="drawer" size="50%" @closed="closed">
    <!-- 标题部分 -->
    <template #header>
      <h4>{{ edit ? $t('operation.edit'): $t('operation.add') }}</h4>
    </template>
    <template #default>
      <el-form
        ref="form"
        :model="formParams"
        :rules="rules"
        label-width="160px"
      >
        <div class="line">
          <el-form-item :label="$t('boat.mainPic')" prop="mainImageUrl">
            <pic-upload v-model="formParams.mainImageUrl" />
          </el-form-item>
          <el-form-item :label="$t('boat.doc')" prop="documentUrl">
            <file-upload v-model="formParams.documentUrl" />
          </el-form-item>
        </div>
        <div class="line">
        <el-form-item :label="$t('boat.brand')" prop="brandId">
          <el-select v-model="formParams.brandId" :placeholder="$t('boat.brand')" style="width: 150px;">
            <el-option v-for="item in brands" :key="item.id" :label="item.brandName" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('boat.type')" prop="typeId">
          <el-tree-select
            v-model="formParams.typeId"
            :data="types"
            :props="{ label: 'typeName' }"
            :render-after-expand="false"
            node-key="id"
            check-strictly
            check-on-click-node
            auto-expand-parent
            :placeholder="$t('boat.type')"
            style="width: 300px;"
            @current-change="treeSelect($event)"
          />
        </el-form-item>
        </div>
        <div class="line">
        <el-form-item :label="$t('boat.model')" prop="model">
          <el-input :placeholder="$t('boat.model')" v-model="formParams.model" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('boat.engibes')" prop="engines">
          <el-input :placeholder="$t('boat.engibes')" v-model="formParams.engines"></el-input>
        </el-form-item>
        </div>
        
        <el-form-item :label="$t('boat.number')" prop="crew">
          <el-input-number :placeholder="$t('boat.number')" v-model="formParams.crew"></el-input-number>
        </el-form-item>
        <div class="line">

        <el-form-item :label="$t('boat.pl')" prop="displacement">
          <el-input-number :placeholder="$t('boat.pl')" v-model="formParams.displacement"></el-input-number>
        </el-form-item>
        
        <el-form-item :label="$t('boat.yxrl')" prop="engines">
          <el-input-number :placeholder="$t('boat.yxrl')" v-model="formParams.fuelTank"></el-input-number>
        </el-form-item>
        
        </div>


        <div class="line">
          <el-form-item :label="$t('boat.cssd')" prop="draftFt">
            <el-input-number :placeholder="$t('boat.cssd')" v-model="formParams.draftFt"></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('boat.cssdm')" prop="draftM">
            <el-input-number :placeholder="$t('boat.cssdm')" v-model="formParams.draftM"></el-input-number>
          </el-form-item>
        </div>
        <div class="line">
        <el-form-item :label="$t('boat.cc')" prop="lengthFt">
          <el-input-number :placeholder="$t('boat.cc')" v-model="formParams.lengthFt"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('boat.ccm')" prop="lengthM">
          <el-input-number :placeholder="$t('boat.ccm')" v-model="formParams.lengthM"></el-input-number>
        </el-form-item>
        </div>
        <div class="line">
        <el-form-item :label="$t('boat.ck')" prop="maxBeamFt">
          <el-input-number :placeholder="$t('boat.ck')" v-model="formParams.maxBeamFt"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('boat.ckm')" prop="maxBeamM">
          <el-input-number :placeholder="$t('boat.ckm')" v-model="formParams.maxBeamM"></el-input-number>
        </el-form-item>
        </div>
        <div class="line">
        <el-form-item :label="$t('boat.hsj')" prop="maxSpeedKn">
          <el-input-number :placeholder="$t('boat.hsj')" v-model="formParams.maxSpeedKn"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('boat.hs')" prop="maxSpeedMph">
          <el-input-number :placeholder="$t('boat.hs')" v-model="formParams.maxSpeedMph"></el-input-number>
        </el-form-item>
        </div>
        <div class="line">
        <el-form-item :label="$t('boat.zz')" prop="maxWeightLb">
          <el-input-number :placeholder="$t('boat.zz')" v-model="formParams.maxWeightLb"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('boat.zzd')" prop="maxWeightTon">
          <el-input-number :placeholder="$t('boat.zzd')" v-model="formParams.maxWeightTon"></el-input-number>
        </el-form-item>
        </div>

        <el-form-item :label="$t('boat.feature')" prop="feature">
          <el-input type="textarea" :placeholder="$t('boat.feature')" v-model="formParams.feature"></el-input>
        </el-form-item>
        <el-form-item :label="$t('boat.description')" prop="depict">
          <el-input type="textarea" :placeholder="$t('boat.description')" v-model="formParams.depict"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            size="default"
            @click="save"
          >
            {{ $t('operation.save') }}
          </el-button>
          <el-button type="primary" size="default" @click="drawer = false">
            {{ $t('operation.cancel') }}
          </el-button>
        </el-form-item>
      </el-form>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { vesselsAdd, vesselsEdit } from '@/api/boat/basic'
import { brandGetAll } from '@/api/boat/brand'
import { typeGetAll } from '@/api/boat/type'
import { ElMessage } from 'element-plus'

let roles = []
let brands = ref([])
let types = ref([])
onMounted(async () => {
  getBrands()
  getTypes()
})

const getBrands = async () => {
  let { status, data } = await brandGetAll()

  if (status == 200) {
    brands.value = data
  }
}
const getTypes = async () => {
  let { status, data } = await typeGetAll()

  if (status == 200) {
    types.value = data
  }
}

let statusArr = ref<any>(['正常', '冻结'])

const defaultForm = {
  id: '',
  mainImageUrl: '',
  brandId: '',
  typeId: '',
  model: '',
  crew: '',
  draftFt: '',
  draftM: '',
  lengthFt: '',
  lengthM: '',
  maxBeamFt: '',
  maxBeamM: '',
  maxSpeedKn: '',
  maxSpeedMph: '',
  maxWeightLb: '',
  maxWeightTon: '',
  feature: '',
  depict: '',
  engines: '',
  displacement: '',
  fuelTank: '',
  documentUrl: '',
}
let formParams = reactive<any>({
  ...defaultForm,
})
const rules = {
  mainImageUrl: [{ required: true, message: '请上传', trigger: 'blur' }],
  brandId: [{ required: true, message: '请上传', trigger: 'blur' }],
  typeId: [{ required: true, message: '请上传', trigger: 'blur' }],
  model: [{ required: true, message: '请输入', trigger: 'blur' }],
}

let drawer = ref(false)
let edit = ref(false)
const show = (row) => {
  if (row) {
    edit.value = true
    Object.keys(formParams).forEach((key) => {
      formParams[key] = row[key]
    })
  } else {
    edit.value = false
  }
  drawer.value = true
}

let loading = ref(false)
let form = ref()
//保存按钮的方法
const save = async () => {
  await form.value.validate()
  loading.value = true
  let result: any
  let param = { ...formParams }

  if (edit.value) {
    result = await vesselsEdit(param)
  } else {
    result = await vesselsAdd(param)
  }
  loading.value = false
  if (result.status == 200) {
    ElMessage({
      type: 'success',
      message: '操作成功',
    })
    drawer.value = false
    $emit('callback')
  } else {
    ElMessage({
      type: 'error',
      message: '操作失败',
    })
  }
}

const closed = () => {
  Object.assign(formParams, defaultForm)
}

//组件内部数据对外关闭的，别人不能访问
//如果想让外部访问需要通过defineExpose方法对外暴露
defineExpose({
  show,
})
//自定义事件的方法
let $emit = defineEmits(['callback'])
</script>

<style scoped>
.line {
  display: flex;
}
</style>